<template>
  <div class="login_box">
    <div class="avatar_box">
      <transition
        appear
        name="animate__animated animate__bounce"
        enter-active-class="animate__backInDown"
        leave-active-class="animate__backOutDown"
      >
        <img src="../assets/logo.png" alt="" class="avatar_img" />
      </transition>
    </div>
    <LoginFromInput />
  </div>
</template>
<script>
import LoginFromInput from "../components/Login/LoginFromInput.vue"
export default {
  name: "Login",
  components: {
    LoginFromInput,
  },
}
</script>

<style scoped>
.login_box {
  width: 450px;
  height: 300px;
  background-color: #fff;
  border-radius: 3px;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}
.avatar_box {
  height: 130px;
  width: 130px;
  border: 1px solid #eee;
  border-radius: 50%;
  position: absolute;
  left: 50%;
  transform: translate(-50%, -50%);

  box-shadow: 0px 0px 10px #eee;
  background-color: #fff;
}
.avatar_img {
  width: 88%;
  height: 88%;
  border-radius: 50%;
  position: absolute;
  left: 6%;
  top: 6%;

  background-color: #eee;
}
</style>
